// 获取首页数据
async function getData() {
  try {
    const res = await axios("/dashboard")
    // console.log(res)
    const { groupData, overview, provinceData, salaryData, year } = res.data
    console.log(salaryData)
    // 渲染概览数据
    renderOverview(overview)
    // 渲染薪资走势图数据
    renderYear(year)
    // 渲染薪资分布数据
    renderSalaryData(salaryData)

    // 渲染地图
    renderMap(provinceData)
  } catch (e) {
    console.dir(e)
  }
}
getData()
// 渲染概览区域函数
function renderOverview(data) {
  for (const k in data) {
    document.querySelector(`[name="${k}"]`).innerHTML = data[k]
  }
}

// 渲染薪资走势图数据函数
function renderYear(data) {
  // 基于准备好的dom，初始化echarts实例
  const myChart = echarts.init(document.querySelector("#line"))

  // 指定图表的配置项和数据
  const option = {
    title: {
      top: 10,
      left: 15,
      text: "2021全学科薪资走向",
      textStyle: {
        color: "black",
        fontSize: 25,
      },
    },
    tooltip: {
      transitionDuration: 0,
      trigger: "axis",
      axisPointer: {
        type: "cross",
        animation: false,
        label: {
          backgroundColor: "purple",
          borderColor: "#aaa",
          borderWidth: 1,
          shadowBlur: 0,
          shadowOffsetX: 0,
          shadowOffsetY: 0,
          color: "#fff",
        },
      },
    },
    grid: {
      top: 70,
      left: 80,
    },
    xAxis: {
      type: "category",
      data: data.map((item) => item.month),
    },
    yAxis: {
      type: "value",
      splitLine: {
        lineStyle: {
          type: "dashed",
        },
      },
    },
    series: [
      {
        data: data.map((item) => item.salary),
        type: "line",
        lineStyle: {
          color: "#54acff",
          width: 7,
        },
        itemStyle: {
          color: "#54acff",
        },
        symbolSize: 8,
        smooth: "true",
        areaStyle: {
          color: {
            type: "linear",
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: "#91c5ff", // 0% 处的颜色
              },
              {
                offset: 0.8,
                color: "#fff", // 100% 处的颜色
              },
            ],
            global: false, // 缺省为 false
          },
        },
      },
    ],
  }
  // 使用刚指定的配置项和数据显示图表。
  myChart.setOption(option)
}

// 渲染班级薪资分布函数
function renderSalaryData(data) {
  const myChart = echarts.init(document.querySelector("#salary"))
  option = {
    title: {
      top: 10,
      left: 15,
      text: "班级薪资分布",
      textStyle: {
        color: "black",
        fontSize: 25,
      },
    },

    tooltip: {
      trigger: "item",
    },
    legend: {
      bottom: "5%",
      left: "center",
    },
    series: [
      {
        name: "班级薪资分布",
        type: "pie",
        radius: ["45%", "55%"],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 10,
          borderColor: "#fff",
          borderWidth: 2,
        },
        label: {
          show: false,
          position: "center",
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 25,
            fontWeight: "bold",
          },
        },
        labelLine: {
          show: false,
        },
        data: data.map((item) => {
          return {
            value: item.g_count + item.b_count,
            name: item.label,
          }
        }),
      },
    ],
    color: ["#fda224", "#5097ff", "#3fceff", "#34d39a"],
  }
  myChart.setOption(option)
}

// 渲染地图
function renderMap(data) {
  const myEchart = echarts.init(document.querySelector("#map"))
  const dataList = [
    { name: "南海诸岛", value: 0 },
    { name: "北京", value: 0 },
    { name: "天津", value: 0 },
    { name: "上海", value: 0 },
    { name: "重庆", value: 0 },
    { name: "河北", value: 0 },
    { name: "河南", value: 0 },
    { name: "云南", value: 0 },
    { name: "辽宁", value: 0 },
    { name: "黑龙江", value: 0 },
    { name: "湖南", value: 0 },
    { name: "安徽", value: 0 },
    { name: "山东", value: 0 },
    { name: "新疆", value: 0 },
    { name: "江苏", value: 0 },
    { name: "浙江", value: 0 },
    { name: "江西", value: 0 },
    { name: "湖北", value: 0 },
    { name: "广西", value: 0 },
    { name: "甘肃", value: 0 },
    { name: "山西", value: 0 },
    { name: "内蒙古", value: 0 },
    { name: "陕西", value: 0 },
    { name: "吉林", value: 0 },
    { name: "福建", value: 0 },
    { name: "贵州", value: 0 },
    { name: "广东", value: 0 },
    { name: "青海", value: 0 },
    { name: "西藏", value: 0 },
    { name: "四川", value: 0 },
    { name: "宁夏", value: 0 },
    { name: "海南", value: 0 },
    { name: "台湾", value: 0 },
    { name: "香港", value: 0 },
    { name: "澳门", value: 0 },
  ]

  // 处理数据
  dataList.map(item => {
    data.find(v=>{
      if(v.name.indexOf(item.name)===0){
        item.value=v.value
      }
    })
  })

  let option = {
    title: {
      text: "籍贯分布",
      top: 10,
      left: 15,
      textStyle: {
        color: "black",
        fontSize: 25,
      },
    },
    tooltip: {
      trigger: "item",
      formatter: "{b}: {c} 位学员",
      borderColor: "transparent",
      backgroundColor: "rgba(0,0,0,0.5)",
      textStyle: {
        color: "#fff",
      },
    },
    visualMap: {
      min: 0,
      max: 6,
      left: "left",
      bottom: "20",
      text: ["6", "0"],
      inRange: {
        color: ["#ffffff", "#0075F0"],
      },
      show: true,
      left: 40,
    },
    geo: {
      map: "china",
      roam: false,
      zoom: 1.0,
      label: {
        normal: {
          show: true,
          fontSize: "10",
          color: "rgba(0,0,0,0.7)",
        },
      },
      itemStyle: {
        normal: {
          borderColor: "rgba(0, 0, 0, 0.2)",
          color: "#e0ffff",
        },
        emphasis: {
          areaColor: "#34D39A",
          shadowOffsetX: 0,
          shadowOffsetY: 0,
          shadowBlur: 20,
          borderWidth: 0,
          shadowColor: "rgba(0, 0, 0, 0.5)",
        },
      },
    },
    series: [
      {
        name: "籍贯分布",
        type: "map",
        geoIndex: 0,
        data: dataList,
      },
    ],
  }
  myEchart.setOption(option)
}
